import { Box, Button, CardMedia, TextField } from '@mui/material';
import React, { JSX } from 'react';
import HIT from '../../assets/hit.jpg';
import { useNavigate } from 'react-router-dom';
import '@fontsource/open-sans';
import { checkToken, login, selectLoggedIn, selectToken } from '../../actions/Auth';
import { useAppDispatch, useAppSelector } from '../../actions/hook';

function Login(): JSX.Element {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const loggedIn = useAppSelector(selectLoggedIn);
  const token = useAppSelector(selectToken);

  const [userName, setUserName] = React.useState<string>('');
  const [password, setPassword] = React.useState<string>('');

  React.useEffect(() => {
    dispatch(checkToken());
  });

  React.useEffect(() => {
    if (loggedIn) {
      navigate('/main/profile');
    }
  }, [loggedIn, token, navigate]);

  const onLoginClick = () => {
    dispatch(login({ userName, password }));
  };

  return (
    <Box sx={{
      display: 'flex',
      flexDirection: 'row'
    }}>
      <Box sx={{
        width: '43%',
        height: '100vh'
      }}>
        <CardMedia
          component="img"
          src={HIT}
          alt="Login Image"
          sx={{
            width: '100%',
            height: '100%'
          }}
        />
      </Box>
      <Box sx={{
        flexGrow: 1,
        position: 'relative',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <Box
          sx={{
            width: '400px',
            height: '500px'
          }}
        >
          <Box sx={{
            fontFamily: 'Open Sans',
            fontWeight: 800,
            fontSize: '48px',
            lineHeight: '125%'
          }}>
            Log in
          </Box>
          <Box sx={{
            fontFamily: 'Open Sans',
            fontStyle: 'normal',
            fontWeight: 400,
            fontSize: '18px',
            lineHeight: '125%',
            color: '#BCC5CF',
            marginTop: '32px'
          }}>
            Enter account information to continue.
          </Box>
          <Box sx={{
            fontFamily: 'Open Sans',
            fontStyle: 'normal',
            fontWeight: 600,
            fontSize: '18px',
            lineHeight: '125%',
            marginTop: '50px'
          }}>
            User Name
          </Box>
          <Box sx={{
            marginTop: '12px'
          }}>
            <TextField
              placeholder='User Name' fullWidth={true} size='small'
              value={userName} onChange={(action) => setUserName(action.target.value)} 
            />
          </Box>
          <Box sx={{
            display: 'flex',
            position: 'relative',
            marginTop: '33px',
            justifyContent: 'space-between'
          }}>
            <Box sx={{
              fontFamily: 'Open Sans',
              fontStyle: 'normal',
              fontWeight: 600,
              fontSize: '18px',
              lineHeight: '125%',
              order: 0
            }}>
              Password
            </Box>
            <Box sx={{
              fontFamily: 'Open Sans',
              fontStyle: 'normal',
              fontWeight: 600,
              fontSize: '14px',
              lineHeight: '125%',
              color: '#154AB6',
              paddingTop: '4px',
              order: 1
            }}>
              Forgot password?
            </Box>
          </Box>
          <Box sx={{
            marginTop: '12px'
          }}>
            <TextField
              type='password' placeholder='Password'
              value={password} onChange={(action) => setPassword(action.target.value)}
              fullWidth={true} size='small'
            />
          </Box>
          <Box sx={{
            marginTop: '80px'
          }}>
            <Button variant='contained' fullWidth={true} sx={{
              backgroundColor: '#0052CC',
              boxShadow: 'none'
            }}
              onClick={onLoginClick}
            >
              Login
            </Button>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

export default Login;